<template>
  <div class="blog-index">
    <div class="left-side">
      <div class="mine-box">
        <div
          class="bg"
          style="
            background: url('https://p.qlogo.cn/qqmail_head/VJklggSvoV3dSsjpcaqGz6WODxiaibJOiazVSDcibFG8hAjR79C1wJdSzj6k9ibtzkDib54PSiadzheicvg/0');
            background-size: cover;
            background-position: center center;
          "
        >
          <div
            class="header"
            style="background-color: rgba(255, 255, 255, 0.5)"
          >
            <div class="left">
              <div class="my-info">
                <div class="nickname">
                  <p>龙井</p>
                </div>
                <div class="sign">
                  <p>还不应止步此处,此处并非终结。</p>
                </div>
              </div>
              <div class="relation">
                <el-button type="primary" size="mini" round>Github</el-button>
                <el-button type="primary" size="mini" round>Github</el-button>
                <el-button type="primary" size="mini" round>Github</el-button>
              </div>
            </div>
            <div class="right">
              <div class="num-item">
                <p>180</p>
                <div>评论</div>
              </div>
              <div class="num-item">
                <p>180</p>
                <div>评论</div>
              </div>
              <div class="num-item">
                <p>180</p>
                <div>评论</div>
              </div>
            </div>
          </div>
        </div>
        <!-- <div class="functional-area"></div> -->
        <div class="dynamic-box">
          <DynamicList></DynamicList>
        </div>
      </div>
    </div>
    <RightSide>
      <RightSideList
        title="联系方式"
        :dataSource="relationList"
      ></RightSideList>
    </RightSide>
  </div>
</template>

<script>
import RightSide from '@/components/RightSide.vue';
import DynamicList from '@/components/DynamicList.vue';
import RightSideList from '@/components/RightSideList.vue';
export default {
  data() {
    return {
      relationList: [
        {
          title: '邮箱',
          desc: '1476711643@qq.com',
        },
        {
          title: 'github',
          desc: 'sdadsdadsad@git.com',
        },
        {
          title: '随便吧',
          desc: '1471241321',
        },
      ],
    };
  },
  components: {
    RightSide,
    DynamicList,
    RightSideList,
  },
};
</script>

<style lang="less">
.blog-index {
  padding: 0 15px;
  display: flex;
  .left-side {
    background-color: rgb(241, 243, 244);
    flex: 1;
    overflow: hidden;
    min-height: calc(100vh - 76px);
    .mine-box {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      .header {
        padding: 50px 30px;
        display: flex;
        justify-content: space-between;
        width: 100%;
        height: 230px;
        .left {
          .my-info {
            display: flex;
            align-items: flex-end;
            .nickname {
              font-size: 30px;
              // font-weight: bold;
              font-weight: 400;
              margin-right: 30px;
            }
            .sign {
              font-size: 14px;
              text-align: end;
              font-family: '宋体';
            }
          }
          .relation {
            margin-top: 100px;
            display: flex;
          }
        }
        .right {
          display: flex;
          width: 270px;
          justify-content: space-evenly;
          .num-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            color: #777;
            p {
              font-size: 30px;
              font-weight: bold;
            }
            & > div {
              font-size: 14px;
            }
          }
        }
      }
      .dynamic-box {
        flex: 1;
        padding: 15px;
      }
    }
  }
}
</style>
